<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta
      name="description"
      content="汇融名企是面向全国商家服务的大型互联网平台，为商家提供流量扶持，引导品牌曝光；为消费者提供风云榜单，招商加盟，引导实现消费，达成合作，上汇融名企实现共赢。"
    />
    <title>奖牌申请-汇融名企</title>
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/jquery.my-message.1.1.css" />
    <style>
      .content {
        min-width: 1500px;
        height: 1316px;
        background: url('./image/picture/getReward_bg.png') center no-repeat;
        background-size: cover;
        position: relative;
      }
      .form-container {
        width: 465px;
        margin: auto;
        position: relative;
        top: 120px;
      }
      .form-wrapper {
        background: url('./image/picture/getReward_content_bg.png') center
          no-repeat;
        top: 315px;
        left: 0;
        right: 0;
        margin: auto;
        position: relative;
        height: 932px;
      }
      .form-title {
        background: url('./image/picture/getReward_title.png') center no-repeat;
        margin: auto;
        height: 39px;
        margin-bottom: 40px;
      }
      .form-item {
        font-size: 14px;
        font-weight: 400;
        color: rgba(13, 13, 13, 1);
        position: relative;
        margin-bottom: 25px;
        margin-left: 32px;
      }
      .form-item-title {
        display: inline-block;
        width: 100px;
        text-align: right;
        margin-right: 8px;
      }
      .form-ps {
        text-align: center;
        margin-bottom: 46px;
        font-size: 26px;
        font-weight: 400;
        color: #e54f42;
      }
      .form-ps span {
        font-size: 22px;
        font-weight: 400;
        color: rgba(248, 85, 22, 1);
      }
      .form-item input {
        width: 252px;
        height: 38px;
        border: 1px solid #b5b5b5;
        outline: none;
        text-indent: 10px;
      }
      .submit {
        width: 160px !important;
        color: white;
        height: 35px !important;
        background: #e54f42;
        cursor: pointer;
        outline: none;
        margin-top: 5px;
        border: none !important;
        font-size: 16px;
        font-weight: 400;
        color: #ffffff;
        text-indent: 0px !important;
      }
      .upload-btn {
        height: 24px;
        background: #f4ede1;
        border: none;
        border-radius: 2px;
        font-size: 14px;
        font-weight: 400;
        color: #ae4f20;
        line-height: 23px;
        outline: none;
        padding: 0 20px;
        z-index: 1;
        cursor: pointer;
      }
      .upload-file {
        display: inline-block;
        font-size: 14px;
        font-weight: 400;
        color: #e54f42;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 210px;
        vertical-align: middle;
        margin-left: 8px;
      }
      .download-btn {
        display: block;
        height: 29px;
        background: url('./image/picture/getReward_btn_bg.png') center no-repeat;
        border-radius: 2px;
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
        line-height: 29px;
        outline: none;
        padding: 0 38px;
        border: none;
        cursor: pointer;
        left: 0;
        right: 0;
        margin: auto;
        margin-top: 15px;
      }
      .upload-input input {
        display: none;
      }
      .code-img {
        width: 116px;
        height: 35px;
        position: absolute;
        top: 5px;
        right: -75px;
      }
      .ps {
        margin-top: 35px;
        margin-bottom: -4px;
        text-indent: 84px;
        font-size: 13px;
        font-weight: 300;
        color: #e54f42;
      }
      .get-phone-code {
        width: 100px;
        height: 34px;
        text-align: center;
        line-height: 34px;
        position: absolute;
        top: 4px;
        right: 70px;
        background: #e54f42;
        color: #ffffff;
        border-radius: 6px;
        cursor: pointer;
        border: none;
      }
    </style>
  </head>
  <body>
    <!-- <div id="header-page"></div> -->
    <!--#include virtual="/header.html" -->
    <div class="content">
      <div class="form-wrapper">
        <div class="form-container">
          <div class="form-title"></div>
          <div class="form-ps">
            <span>请您下载附件后，将盖公章的奖牌证书拍照上传</span>
            <button class="download-btn" id="download-btn">
              请在此下载奖牌证书
            </button>
          </div>
          <!-- <div class="form-item">
            <div class="form-item-title">企业名称：</div>
            <input
              class="input"
              id="title"
              placeholder="请输入企业名称"
              type="text"
              name="name"
            />
          </div> -->

          <div class="form-item">
            <div class="form-item-title">奖牌证书上传：</div>
            <button class="upload-btn">选择文件</button>
            <div class="upload-file" id="upload-3-text">未选择任何文件</div>
            <label
              style="
                opacity: 0;
                width: 107px;
                cursor: pointer;
                height: 24px;
                position: absolute;
                left: 82px;
                z-index: 10;
              "
            >
              <input
                type="file"
                class="upload-input"
                id="upload-3"
                style="display: none;"
              />
            </label>
          </div>
          <div class="form-item">
            <div class="form-item-title">营业执照上传：</div>
            <button class="upload-btn">选择文件</button>
            <div class="upload-file" id="upload-1-text">未选择任何文件</div>
            <label
              style="
                opacity: 0;
                width: 107px;
                cursor: pointer;
                height: 24px;
                position: absolute;
                left: 82px;
                z-index: 10;
              "
            >
              <input
                type="file"
                class="upload-input"
                id="upload-1"
                style="display: none;"
              />
            </label>
          </div>
          <div class="form-item">
            <div class="form-item-title">姓名：</div>
            <input
              class="input"
              id="prize_name"
              placeholder="请输入姓名"
              type="text"
              name="prize_name"
            />
          </div>
          <div class="form-item">
            <div class="form-item-title">邮递地址：</div>
            <input
              class="input"
              id="adress"
              placeholder="请输入邮递地址"
              type="text"
              name="adress"
            />
          </div>
          <div class="form-item">
            <div class="form-item-title">联系方式：</div>
            <input
              class="input"
              id="phone"
              placeholder="请输入联系方式"
              type="tel"
              name="phone"
            />
          </div>
          <div class="form-item">
            <div class="form-item-title">短信验证码：</div>
            <input
              class="input"
              id="phoneCode"
              placeholder="请输入短信验证码"
              type="tel"
              name="phoneCode"
              style="padding-right: 110px; width: 142px;"
            />
            <button class="get-phone-code" id="getPhonecode">获取验证码</button>
          </div>
          <!-- <div class="form-item">
            <div class="form-item-title">店铺名称：</div>
            <input
              class="input"
              id="title"
              placeholder="请输入店铺名称"
              type="tel"
              name="title"
            />
          </div> -->
          <div class="form-item">
            <div class="form-item-title">验证码：</div>
            <input
              class="code"
              id="code"
              placeholder="请输入验证码"
              type="text"
              name="code"
            />
            <img
              class="code-img"
              src="http://39.107.45.63:8084/api/common/getCode"
              alt="验证码-汇融名企"
            />
          </div>
          <div class="form-item" style="text-align: center;">
            <!-- <input
              class="submit"
              style="margin-right: 77px;"
              id="cancel"
              type="button"
              value="返回"
            /> -->
            <input class="submit" id="submit" type="button" value="提交" />
          </div>
          <div class="ps">
            注：请将奖牌证书附件下载后，填写并盖公章，拍照上传
          </div>
        </div>
      </div>
    </div>
    <!-- <div id="footer-page"></div> -->
    <!--#include virtual="/footer.html" -->
    <script src="./js/jquery-1.11.0.min.js"></script>
    <script src="./js/jquery.my-message.1.1.js"></script>
    <script src="./js/utils.js"></script>
    <script type="text/javascript">
      var code_id = ''
      var imgUrl = ''
      $(function () {
        // $('#header-page').load('header.html')
        // $('#footer-page').load('footer.html')
        var windowWidth = $('body').width()
        if (windowWidth > 1880) {
          $('.content').css('height', (1316 / 1903) * windowWidth + 'px')
          var top = ((1316 / 1903) * windowWidth - 1316) / 2 + 292
          $('.form-wrapper').css('top', top)
        }
        var uploading = false
        var file = ''
        var image = ''
        onEmptydata()
        $('.code-img')[0].src = baseURL + '/api/common/getCode?' + Math.random()
        $(function () {
          var historyData = JSON.parse(sessionStorage.getItem('formData'))
          for (key in historyData) {
            if (historyData[key]) {
              if (key === 'image') {
                image = historyData.image
                $('#upload-1-text').html(historyData.image.name)
              } else if (key === 'file') {
                file = historyData.file
                $('#upload-3-text').html(historyData.file.name)
              } else {
                $('#' + key).val(historyData[key])
              }
            }
          }
        })
        window.onunload = function () {
          var phone = $('#phone').val()
          var prize_name = $('#prize_name').val()
          var title = $('#title').val()
          var data = {
            prize_name: prize_name,
            phone: phone,
            image: image,
            file: file,
            title: title,
          }
          if (phone || prize_name || image || file || title) {
            sessionStorage.setItem('formData', JSON.stringify(data))
          }
        }
        $('.upload-input').change(function (e) {
          if (uploading) {
            addMessage('正在上传中', 'error')
          }
          uploading = true
          var id = e.currentTarget.id
          var files = e.target.files
          var fd = new FormData()
          fd.append('type', id.split('-')[1])
          fd.append('file', files[0])
          $.ajax({
            url: baseURL + '/api/common/fileUpload',
            type: 'POST',
            data: fd,
            processData: false, //tell jQuery not to process the data
            contentType: false, //tell jQuery not to set contentType
            success: function (res) {
              //成功回调函数
              uploading = false
              if (+res.code === 1) {
                addMessage(res.msg, 'success')
                $('#' + id + '-text').html(e.target.files[0].name)
                if (id === 'upload-1') {
                  image = { url: res.data, name: e.target.files[0].name }
                } else {
                  file = { url: res.data, name: e.target.files[0].name }
                }
              } else {
                addMessage(res.msg, 'warning')
              }
              $('#' + id).val('')
            },
            error: function (err) {
              //失败回调函数
              addMessage(err.msg, 'warning')
              $('#' + id).val('')
            },
          })
        })
        $('.code-img').click(function () {
          // getCode()
          $(this)[0].src = baseURL + '/api/common/getCode?' + Math.random()
        })
        // getCode()
        $('#download-btn').click(function () {
          window.open('http://admin.huirzq.com/uploads/奖品认领证明申请书.docx')
        })
        $('#cancel').click(function () {
          history.back()
        })

        $('#submit').click(function () {
          var prize_name = $('#prize_name').val()
          var nameTest = /^(?:[\u4e00-\u9fa5]+)(?:●[\u4e00-\u9fa5]+)*$|^[a-zA-Z0-9]+\s?[\.·\-()a-zA-Z]*[a-zA-Z]+$/
          var phone = $('#phone').val()
          var phoneCode = $('#phoneCode').val()
          var randCode = $('#code').val()
          var title = $('#title').val()
          var adress = $('#adress').val()
          // var checked = $('#checkbox')[0].checked
          var phoneTest = /(^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$)|(^0?[1][3-9 ][0-9]{9}$)/
          if (!file) {
            addMessage('请上传奖品认领证明申请书', 'error')
            getCode()
            return false
          }
          if (!image.url) {
            addMessage('请上传营业执照', 'error')
            getCode()
            return false
          }
          if (!nameTest.test(prize_name)) {
            addMessage('姓名输入有误，请重新输入！', 'error')
            getCode()
            return false
          }
          if (!adress) {
            addMessage('邮递地址不能为空！', 'error')
            getCode()
            return false
          }
          if (!phoneTest.test(phone)) {
            addMessage('联系方式输入有误，请重新输入！', 'error')
            getCode()
            return false
          }
          if (!phoneCode) {
            addMessage('短信验证码不能为空！', 'error')
            getCode()
            return false
          }
          // if (!title) {
          //   addMessage('店铺名称不能为空！', 'error')
          //   return false
          // }
          if (!randCode) {
            addMessage('验证码不能为空！', 'error')
            getCode()
            return false
          }
          // if (!checked) {
          //   addMessage('请先阅读并同意《本地优选服务协议》', 'error')
          //   return false
          // }
          var data = {
            prize_name: prize_name,
            phone: phone,
            randCode: randCode,
            image: image.url.imageUrl,
            file: file.url.imageUrl,
            verificationCode: phoneCode,
            mailing_address: adress,
            // imgUrl
          }
          // console.log(file)
          $.ajax({
            url: baseURL + '/api/prize/setSave',
            type: 'POST',
            data: data,
            success: function (res) {
              //成功回调函数
              if (+res.code === 1) {
                addMessage('提交成功', 'success')
                file = ''
                image = ''
                onEmptydata()
                // 可以重新获取验证码
                intTime = window.clearInterval(intTime)
                var dom = $('#getPhonecode')[0]
                dom.disabled = false
                $('#getPhonecode').css({
                  background: '#e54f42',
                  cursor: 'pointer',
                })
                dom.innerHTML = '获取验证码'
              } else {
                addMessage(res.msg, 'warning')
              }
              $('.code-img')[0].src =
                baseURL + '/api/common/getCode?' + Math.random()
            },
            error: function (err) {
              //失败回调函数
              addMessage(err.msg, 'warning')
            },
          })
        })
        $('#getPhonecode').click(function () {
          var dom = $(this)[0]
          var phone = $('#phone').val()
          var phoneTest = /(^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$)|(^0?[1][3-9 ][0-9]{9}$)/
          if (!phoneTest.test(phone)) {
            addMessage('联系方式输入有误，请重新输入！', 'error')
            getCode()
            return false
          }
          var data = {
            phone: phone,
          }
          $.ajax({
            url: baseURL + '/api/common/verificationCode',
            type: 'GET',
            data: data,
            success: function (res) {
              //成功回调函数
              if (+res.code === 1000) {
                addMessage('发送成功', 'success')
                dom.disabled = true
                $('#getPhonecode').css({
                  background: '#bebebe',
                  cursor: 'not-allowed',
                })
                dom.innerHTML = '60s 重新发送'
                var i = 60
                intTime = self.setInterval(function () {
                  i -= 1
                  dom.innerHTML = i + 's 重新发送'
                  if (i == 0) {
                    intTime = window.clearInterval(intTime)
                    dom.disabled = false
                    $('#getPhonecode').css({
                      background: '#e54f42',
                      cursor: 'pointer',
                    })
                    dom.innerHTML = '获取验证码'
                  }
                }, 1000)
              } else {
                addMessage(res.msg, 'warning')
              }
            },
            error: function (err) {
              //失败回调函数
              addMessage(err.msg, 'warning')
            },
          })
        })
      })
      function getCode() {
        $('.code-img')[0].src = baseURL + '/api/common/getCode?' + Math.random()
      }
      function onEmptydata(file, image) {
        $('#phone').val('')
        $('#code').val('')
        $('#prize_name').val('')
        $('#phoneCode').val('')
        $('#adress').val('')
        $('#upload-1').val('')
        $('#upload-3').val('')
        $('.upload-file').html('未选择任何文件')
        sessionStorage.setItem('formData', '{}')
      }
    </script>
  </body>
</html>
